<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 购物车确认订单区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4><span class="back" @click="goBack"><Icon type="md-arrow-round-back" />
                             返回</span>确认订单</h4>
                        </div>
                    </div>
                </b-col>
            </b-row>
            <!-- 收货地址区域 -->
            <b-row>
                <b-col cols="12" sm="12" md="12" lg="12" class="myitem">
                    <a-divider orientation="left">收货地址</a-divider>
                    <router-link to="/receiveAddress" class="go">新增</router-link>
                    <div class="receive-list">
                        <a-radio-group @change="onChange" v-model="value">
                            <a-radio :style="radioStyle" :value="item.raId"
                            v-for="item in addrList" :key="item.raId">
                                <span class="default" v-if="item.raDefaultAddr==1">默认</span>
                                <span class="pad" title="收货人">{{item.raFullname}}</span>
                                <span class="pad" title="手机号">{{item.raPhone}}</span>
                                <span title="收货地址">{{item.raAddr}}</span>
                            </a-radio>
                        </a-radio-group>
                    </div>
                </b-col>
            </b-row>
            <!-- 订单概要 -->
            <b-row>
                <b-col cols="12" sm="12" md="12" lg="12" class="myitem">
                    <a-divider orientation="left">订单概要</a-divider>
                    <table class="tender-table">
                        <thead>
                            <tr>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>价格</th>
                                <th>运费</th>
                                <th>小计</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in goodsList" :key="item.sId">
                                <td><router-link  :to="'/goodsInfo/' + item.goods.gId">
                                    <img :src="item.mainPic" alt=""></router-link></td>
                                <td>{{item.goods.gName}}</td>
                                <td>￥{{item.sPrice}}</td>
                                <td>￥{{item.sFire}}</td>
                                <td>￥{{item.sTotal}}</td>
                                <td class="myInput">
                                    <input type="text" placeholder="选填备注" v-model="item.remark">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mybtn-info">
                        <span></span>
                        <div class="go-order">
                            <span class="total">共 {{count}} 件,</span>
                            <span class="total">合计：<span class="red">￥{{totalPrice}}</span></span>
                            <a href="javascript:void(0);" @click.prevent="submitOrders" class="go">提交订单</a>
                        </div>
                    </div>
                </b-col>
            </b-row>
            <!-- 选中商品下架的列表 -->
            <Modal
                v-model="modal1"
                title="以下商品已经下架啦，请重新选择">
                <div class="shelfGoods">
                    <div class="shelfGoods-item" v-for="item in shelfGoodsList" :key="item.gId">
                        <router-link :to="'/goodsInfo/' + item.gId">
                            <img :src="item.mainPic" alt="" class="space"></router-link>
                        <p>{{item.gTitle}}</p>
                    </div>
                </div>
            </Modal>
            <!-- 去支付模态框 -->
            <Modal
                v-model="modal2"
                @on-cancel="cancel"
                title="订单已经生成，赶快去支付吧">
                <div class="shelfGoods">
                  <div class="shelfGoods-item" v-for="item in newOrderList" :key="item.oGid">
                      <router-link :to="'/goodsInfo/' + item.oGid">
                          <img :src="item.mainPic" alt="" class="space"></router-link>
                      <p>{{item.goods.gTitle}}</p>
                  </div>
                  <div class="order-total">
                      <p>订单总金额：<span class="order-price">￥{{totalPrice}}</span></p>
                  </div>
                  <div class="shelfGoods-item">
                      <a class="alipay" :href="'http://localhost:8080/alipay/pay?orderNo=' + parentNo + '&price=' + totalPrice">
                      去支付</a>
                  </div>
                </div>
            </Modal>
        </b-container>
    </div>
</template>

<script>

export default {
  name: 'confirmOrder',
  data () {
    return {
      uId: JSON.parse(localStorage.getItem('user')).uId,
      value: 0, // 单选框默认选中值
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      addrList: [], // 收货地址列表
      goodsList: [], // 商品清单列表
      count: 0, // 订单商品数量
      totalPrice: 0, // 商品总价
      shelfGoodsList: [], // 下架的商品列表
      modal1: false,
      oId: 0, // 订单id
      modal2: false,
      orderList: [], // 订单商品项列表
      newOrderList: [], // 新增返回的订单列表
      parentNo: '' // 总订单编号
    }
  },
  created () {
    this.findAddrList()
    this.findGoodsList()
    this.findCountByUserId()
    this.findTotalPrice()
  },
  methods: {
    cancel () {
      this.$router.push({ path: '/MyBuyOrders' })
    },
    // 返回按钮
    goBack () {
      this.$router.go(-1)
    },
    // 单选框选中事件
    onChange (e) {
      console.log('radio checked', e.target.value)
      console.log(this.value)
    },
    // 根据用户id查询此用户的收货地址列表，选中默认收货地址
    findAddrList () {
      this.$axios({
        url: 'receiveAddress/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.addrList = res.data.list
          this.addrList.forEach(item => {
            if (item.raDefaultAddr === 1) {
              this.value = item.raId
            }
          })
        }
      })
    },
    // 根据用户id获取用户选中的商品列表
    findGoodsList () {
      this.$axios({
        url: 'shopcar/findGoodsByUserId/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.goodsList = res.data.list
          this.goodsList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.goods.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
                this.$set(item, 'remark', '')
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取用户选中的商品数量
    findCountByUserId () {
      this.$axios({
        url: 'shopcar/findCheckCountByUserId/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.count = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据用户id计算用户选中的商品总价
    findTotalPrice () {
      this.$axios({
        url: 'shopcar/findTotalPrice/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.totalPrice = res.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 点击提交订单按钮判断商品是否下架，未下架的话生成订单
    submitOrders () {
      this.$axios({
        url: 'goods/checkHas/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.shelfGoodsList = res.data.list
          // 不为空表示有商品已被下架
          if (this.shelfGoodsList.length !== 0) {
            this.shelfGoodsList.forEach(item => {
              this.$axios({
                url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
                method: 'get'
              }).then(res => {
                if (res.data.code === 200) {
                  this.$set(item, 'mainPic', res.data.object.gpAddress)
                }
              }).catch(error => {
                console.log(error)
              })
            })
            this.modal1 = true
          } else {
            // 新增订单
            this.createOrder()
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 新增订单
    createOrder () {
      this.goodsList.forEach(item => {
        this.orderList.push({
          oUid: this.uId,
          oTotalAmount: item.sTotal,
          oRaid: this.value,
          oGid: item.sGid,
          oRemark: item.remark
        })
      })
      this.$axios({
        url: 'orders/save',
        method: 'post',
        dataType: 'json',
        data: JSON.stringify(this.orderList),
        headers: {
          Authorization: localStorage.getItem('token'),
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.code === 200) {
          // 新增订单成功，打开模态框调用支付宝接口
          this.newOrderList = res.data.list
          this.newOrderList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.oGid,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                this.$set(item, 'mainPic', res.data.object.gpAddress)
                this.parentNo = item.oParentNo
              }
            }).catch(error => {
              console.log(error)
            })
          })
          console.log(this.newOrderList)
          // 新增订单商品项成功，打开模态框调用支付宝支付接口
          this.modal2 = true
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

</script>
<style scoped>
.order-total {
  margin-top: 10px;
}
.order-total p {
  margin-bottom: 10px;
}
.order-price {
  color: #ef4238;
  font-size: 16px;
}
.alipay {
  display: inline-block;
  padding: 4px 8px;
  color: #fff;
  background: #ef4238;
  border-radius: 5px;
}
.default {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    color:#ef4238;
    border:1px solid #ef4238;
    margin-right: 8px;
}
.ant-radio-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5 !important;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    margin-right: 8px;
    white-space: pre-wrap !important;
    cursor: pointer;
    height: 55px !important;
    padding: 6px 0;
}
.total {
    font-size: 12px;
    columns: #4e4e4e;
}
.myitem h6 {
    background: #efefef;
    padding: 10px 10px;
    color:#444;
}
.back {
    cursor: pointer;
    margin-right: 10px;
    font-size: 12px;
    font-weight: normal;
    color:rgb(163, 163, 163);
}
.pad {
    margin-right: 5px;
    display: inline-block;
}
.pay {
    display: inline-block;
}
.ivu-radio-group {
    width: 100%;
}
.go {
    display: inline-block;
    padding: 2px 8px;
    border: 2px solid skyblue;
    border-radius: 15px;
}
.receive-list {
    width: 100%;
}
.receive-item {
    width: 95%;
    display: inline-block;
}
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.tender-table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 35px;
}
.tender-table tr{
    border-bottom:1px solid #eee;
    text-align: left;
}
.tender-table thead tr{
    border-top:1px solid #eee;
    border-bottom:2px solid #eee;
}
.tender-table th,.tender-table td{
    padding:7px 10px;
}
.tender-table img {
    width: 45px;
    height: 45px;
}
.mybtn-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.total {
    margin-right: 10px;
}
.red {
    color: #ef4238;
    font-size: 14px;
}
.go {
    display: inline-block;
    padding: 4px 8px;
    border: 2px solid skyblue;
    border-radius: 15px;
    margin-bottom: 8px;
}
.myInput input {
    outline: 0;
    border:1px solid rgb(224, 224, 224);
    padding: 4px 5px;
    font-size: 12px;
}
.shelfGoods-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}
.shelfGoods-item img {
  width: 45px;
  height: 45px;
}
.space {
  margin-right: 10px;
}
</style>
